<template>
	<view class="remind-comp" v-show="remindStore.showRemind">
		<view class="remind-title">
			小星星提醒：
		</view>
		<view class="remind-text">
			{{showRemindData.startTime}}-{{showRemindData.endTime}}
			<br />
			{{showRemindData.name}}
			<br />
			{{showRemindData.planDetail}}
		</view>
		<view class="operation-btns">
			<view class="stop-btn btn" @tap="stop">
				暂停
			</view>
			<view class="execute-btn btn" @tap="execute">
				执行
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		remindStore
	} from '@/store/remind';
	import {
		storeToRefs
	} from "pinia"
	const {
		showRemindData
	} = storeToRefs(remindStore)
	const stop = () => {
		remindStore.changeShowRemind(false)
		remindStore.setRemindTimer()
	}
	const execute = () => {
		remindStore.changeShowRemind(false)
		remindStore.setRemindTimer()
	}
	// $showRemind
	// console.log($showRemind.value)
</script>

<style lang="less" setup>
	.remind-comp {
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100vw;
		height: 100vh;
		opacity: 1;
		background: #454444;

		.remind-title,
		.remind-text {
			padding-top: 260rpx;
			box-sizing: border-box;
			font-size: 48rpx;
			font-weight: 400;
			letter-spacing: 0px;
			color: #fff;
			text-align: center;
			vertical-align: top;
		}

		.remind-title {}

		.remind-text {}

		.operation-btns {
			position: absolute;
			bottom: 94rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				border-radius: 50%;
				width: 152rpx;
				height: 152rpx;
				opacity: 1;

				font-size: 36rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 152rpx;

				text-align: center;
				vertical-align: top;
			}

			.stop-btn {
				margin-right: 172rpx;
				background: rgba(255, 87, 51, 1);
				color: rgba(0, 0, 0, 1);
			}

			.execute-btn {
				background: rgba(67, 207, 124, 1);
				color: #fff;
			}
		}
	}
</style>